<template>
  <span :class="cls" @click="handleClick"><slot></slot></span>
</template>

<script>
export default {
  name: 'LinkBtn',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'default'
    },
    disabled: Boolean
  },
  computed: {
    cls () {
      return ['link-btn', `link-btn-size-${this.size}`, `link-btn-type-${this.type}`, this.disabled ? `link-btn-${this.disabled}` : null]
    }
  },
  methods: {
    handleClick () {
      if (this.disabled) return false
      this.$emit('click')
    }
  }
}
</script>

<style lang="stylus" scoped>
size = link-btn-size
type = link-btn-type

.link-btn
  white-space nowrap
  cursor pointer
  transition opacity linear .1s
  &:hover
    opacity .6
  &:focus
    opacity .8
  &.{size}-default
    font-size 14px
  &.{size}-large
    font-size 16px
  &.{size}-small
    font-size 12px
  &.{type}-default
    color #515a6e
  &.{type}-primary
    color #2d8cf0
  &.{type}-info
    color #2db7f5
  &.{type}-success
    color #19be6b
  &.{type}-warning
    color #f90
  &.{type}-error
    color #ed4014
  &.link-btn-disabled
    pointer-events none
</style>
